Pendahuluan 


Apabila Anda pernah melihat sebuah alamat website favorit yang sering 
dikunjungi, kemudian ingin mencoba mengetahui teknik pemisahan 
antara desain dan CSS, maka buku ini dapat dijadikan rujukan. Buku ini 
mencakup proses perancangan web (web design) bagi programmer yang 
memiliki sedikit latar belakang desain dan penerjemahan hasil desain ke 
dalam kode CSS. 


Pemilihan warna yang bagus dan tata letak (layout) yang serasi sangat 
diperlukan oleh para programmer yang umumnya sangat jarang memiliki 
jiwa seni (art) untuk menghasilkan sebuah website yang keren. Semua 
kebutuhan yang diperlukan oleh programmer pemula ataupun yang 


sudah mahir, ada di sini. 


1,1 KONSEP DASAR MEMBUAT WEBSITE 


Rancangan web yang baik bukan hanya sekadar tentang teknik membuat 
halaman yang bagus. Konsep, teori, tipografi, tata letak, dan kegunaan 


merupakan bagian penting konsep dasar rancangan website yang baik. 


Aspek penting dalam menciptakan sebuah website yang baik adalah 
kreativitas. Apa yang disampaikan dalam buku ini hanya sebatas konsep 
dan teknik pembuatan website yang baik. Panduan dan tutorial yang 
disajikan tidak harus diikuti setiap langkahnya, karena yang terpenting 
adalah kreativitas Anda. Pemilihan warna dan jenis huruf yang 
disampaikan dalam buku ini tidak harus diikuti dan bisa diganti sesuai 
selera Anda. Banyak panduan dan tutorial mengenai pembuatan website 
yang baik dalam bentuk buku maupun tulisan di internet, Anda bisa 
belajar banyak dari sana untuk membuat kreativitas sendiri dalam 


menciptkan website yang berbeda dari buku ini. 


Pengalaman pemrograman web memiliki peran penting untuk men- 
ciptakan website yang menarik, namun aspek desain grafis juga tidak 
kalah penting seperti pemilihan warna, pemilihan huruf, posisi menu, dan 


elemen lain yang memerlukan sentuhan seni desain. 


111 Website yang Ada Saat Ini 


Bagi sebagian pengembang web, lebih memilih membuat website dari nol 
karena bebas menentukan kreativitas dan imajinasi dibandingkan harus 
memperbaiki website yang sudah ada. Kesulitan yang sering dijumpai 
ketika memperbaiki website yang ada adalah para programmer harus 
mempelajari terlebih dulu program yang dibuat oleh orang lain. Mulai 
dari struktur database, tipe data, hingga fungsi dalam program. Ini akan 


membutuhkan waktu cukup lama. 


Ketika bertemu seorang klien, ada banyak permintaan, misalnya "saya 
ingin formnya terlihat interaktif", "saya ingin ketika pengunjung melihat 


gambar dalam website kami, langsung timbul rasa lapar", "saya ingin 


warna website cerah tapi tidak norak", "saya ingin....". 


Sebagai web developer, dari mana Anda akan memulai? Pertama, cobalah 


memahami keinginan para klien terhadap situs yang akan dibuat. Dari 


catatan permintaan, berikan umpan balik sebagai titik poin awal kepada 
para klien. Kebutuhan dan permintaan dari para klien harus dikum- 
pulkan sebagai bahan pertimbangan dalam mengembangkan website. 
Pengalaman sebagai seorang web developer sangat dibutuhkan untuk 


memecahkan permasalahan yang dihadapi. 


Kedua, pastikan Anda memahami tujuan sebenarnya dari situs tersebut 
dan Anda memiliki perasaan untuk para audiens yang dituju. Setiap 
audiens memiliki harapan yang berbeda setiap kali mengunjungi website 
yang berbeda. Oleh karena itu, cobalah cari tahu siapa target klien 
kemudian menganalisis kompetitor sebagai bahan untuk mempelajari 


kekuatan dan kelemahannya. 


Ketiga, setelah mendapatkan daftar kebutuhan dari hasil diskusi dengan 
klien, mulailah membuat sketsa sementara untuk memproses semua 
informasi tersebut. Sketsa dalam bentuk coretan dalam kertas meng- 
gunakan pena atau pensil merupakan langkah awal yang baik untuk 


menerjemahkan ide dan gagasan ke dalam gambar. 


Semua klien itu sulit, namun jangan terlalu keras kepada mereka. Ini 
dapat menjadi sulit untuk menangani permintaan yang aneh dari para 
klien. Perlu diingat bahwa para klien membutuhkan bantuan Anda 
karena keahlian. Tugas seorang web developer mencari tahu apa yang 
benar-benar mereka inginkan. Mereka mungkin tidak tahu bagaimana 
cara menyampaikan kepada Anda tentang situsnya saat ini, kemudian 


meminta Anda sebagai web developer untuk memberikan solusi terbaik. 


Anda harus menggunakan pengalaman sebagai web developer untuk 
mendengarkan ungkapan para klien sehingga dapat memahami apa yang 
menjadi pokok permasalahan yang mengganggu mereka. Banyak web 
developer yang mengatakan bahwa para klien tidak tahu apa yang mereka 
inginkan. Sebenarnya, mereka tidak tahu bagaimana cara menyampaikan 


apa yang ada dalam pemikiran para klien kepada Anda, dan apa yang 


mereka inginkan menjadi lebih jelas setelah ada sesuatu yang tidak 
dilakukan kepada mereka. Komunikasi yang intens akan sangat mem- 
bantu menunjukkan hal-hal lain kepada para klien sehingga mereka dapat 
memberi tahu kepada Anda, apakah Anda berada pada jalur yang benar 
sesuai keinginan klien. Komunikasi yang kontinu sama baiknya dalam 


rancangan, seperti halnya membangun sebuah aplikasi. 


11.2 Pengumpulan Data 


Sebagai seorang web developer, Anda perlu mengetahui secara pasti apa 
yang harus dilakukan jika mendesain ulang aplikasi yang sudah ada. Anda 
harus melakukan wawancara kepada stakeholder dan pengguna. Anda juga 
akan menggali informasi terhadap bahasa pemrograman aplikasi yang 
telah dibuat. Proses yang sudah berjalan dalam website saat ini harus tetap 
ada dan harus diikuti ketika mendesain ulang website, jangan sampai 


berubah karena akan memengaruhi pola pikir audiens. 


Beberapa permintaan mungkin tidak tampak jelas atau bahkan tidak 
masuk akal, namun jangan khawatir atau merasa kewalahan ketika klien 
mengatakan ingin website terlihat lebih menyenangkan dan menyegarkan. 
Bahkan yang lebih buruk lagi ketika klien meminta Anda untuk men- 
ciptakan sebuah website yang sama persis dengan yang sudah ada. 
Setidaknya, jika melihat kembali daftar permintaan klien yang sudah 
disepakati akan membantu Anda untuk tidak harus memenuhi keinginan 
klien yang berubah-ubah. Itulah sebabnya rincian pekerjaan sangat 
penting sebagai petunjuk untuk menanggapi komplain dari klien. Ikutilah 
prinsip-prinsip desain yang baik dan kumpulkan umpan balik (feedback) 
secara konstan dari klien Anda, dan jenis-jenis permintaan di luar 


kesepakatan bersama. 


11.3 Memahami Tujuan 


Ketika merancang website, tetaplah fokus pada melayani target audiens. 
Salah satu pendekatan yang berguna adalah mendapatkan daftar beberapa 
website mereka sebagai referensi. Bisa jadi, Anda tidak menginginkan 
website tersebut sebagai model, namun mengetahui mereka (klien) dapat 


membantu mengukur elemen-elemen apa yang disukai klien-klien Anda. 


Ketika Anda melakukan pekerjaan mendesain untuk para klien, pastikan 
Anda membuat website untuk klien dan para audiens (pengguna), bukan 
untuk diri Anda sehingga dapat dipamerkan kepada rekan-rekan Anda. 
Pastikan setiap orang memahami website. Apakah website tersebut me- 
nyajikan informasi, mendorong konsumen untuk membeli produk, 


menghibur pengguna, atau hanya mengumpulkan data? 


Anda harus belajar sebanyak mungkin tentang pengunjung website. Anda 
perlu meminta beberapa pertanyaan, apakah pengunjung nantinya akan 
berkunjung setiap hari atau hanya kadang-kadang saja untuk men- 
dapatkan apa yang diinginkan, setelah didapat maka selesai sudah dan 
pengunjung tidak akan berkunjung lagi karena apa yang diinginkan sudah 
diperoleh. Sebagai contoh, Anda akan merancang website untuk anak- 
anak muda, jauh berbeda tampilannya ketika merancang sebuah website 


agen real estat. 


11.4 Mulai Merancang 


Setelah Anda mengumpulkan persyaratan dan memiliki pemahaman yang 
baik terhadap website, selanjutnya mencoba membangun website. Seka- 
rang saatnya merancang implementasi. Jika persyaratan sudah terpenuhi, 


langkah-langkah yang logis mungkin nampak seperti berikut: 
1. Buatlah beberapa sketsa desain dan dapatkan persetujuan dari klien. 


2. Pilih warna. 


3. Pilih font. 

4. Terapkan desan dasar dalam Photoshop. 

5. Membuat gambar untuk banner, tombol, dan elemen lainnya. 
6. Buatlah template HTML5 dan CSS. 

7.  Ujilah desain Anda untuk kompabilitas dan aksesibilitas. 


Pensil dan kertas merupakan elemen penting bagi proses kreativitas, dan 
Anda dapat menggoreskan lebih cepat dibandingkan alat lain melalui 
komputer. Selain itu, akan lebih mudah membuang desain awal jika tidak 


cocok karena tidak memerlukan investasi yang mahal. 


Jika Anda sudah menjadi seorang programmer untuk sementara waktu, 
Anda memiliki akses ke papan tulis untuk menggambar sederhana sebagai 
sarana berkomunikasi dengan seluruh tim Anda. Metode pendekatan ini 
sama dengan metode untuk rapat dengan klien Anda. Seorang klien non- 
teknis dapat menunda jika Anda mengeluarkan laptop dan mulai 
mengetik dan mendesain, namun pensil dan kertas dapat dijadikan sarana 
komunikasi interpersonal yang besar. Buatlah sketsa rancangan Anda di 
depan para klien kemudian menyerahkan hasilnya kepada klien untuk 


melihat ide rancangan website. 


115 Membuat Sketsa dari Gagasan 


Anda harus menggambar desain di atas kertas untuk mengangkat ide-ide 
secara cepat. Bisa juga meminta saran dari orang lain seputar rancangan 
yang Anda buat. Jika perlu, meminta bantuan kepada klien. Untuk sketsa 
desain, Anda perlu mengetahui tata letak website mengandung elemen 
apa saja. Apakah perlu tautan (link) dalam tombol Home? Elemen apa 


saja yang harus ada di halaman utama? 


Beberapa elemen yang umumnya ada di halaman utama (homepage), 


yaitu nama website, kolom pencarian, paragraf pengantar secara singkat 
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tentang website, dan daftar kategori. Selain elemen-elemen tersebut, 
Home juga berisi tautan berbagai halaman informasi, termasuk syarat dan 


ketentuan, teks Sign-up, kebijakan privasi, dan informasi kontak. 


Jika diperhatikan, beberapa website cenderung memiliki banyak kesa- 
maan. Sebagian besar header berada di bagian atas yang berisi logo atau 
nama website. Banyak website juga memiliki wilayah konten utama 
terbagi dalam kolom, dan setidaknya salah satu kolom sering digunakan 
sebagai daerah sidebar yang berisi navigasi (menu) atau informasi 
tambahan. Sedangkan footer berada di bagian bawah yang berisi infor- 


masi hak cipta maupun beberapa link tambahan. 


Alasan utama terjadinya kemiripan bentuk antar-website adalah para 
desainer dan pengembang meniru website yang dianggap impresif. 
Bahkan, sebagian besar website surat kabar memiliki kesamaan dalam hal 
tata letak (layout). 


Untuk merancang fungsi sebuah website, Anda harus memastikan bahwa 
pengunjung/pengguna dapat menemukan apa yang mereka inginkan 
secara cepat tanpa harus mencari atau menggali informasi terlalu dalam. 
Navigasi harus mudah digunakan, jangan membuat bingung pengunjung 


dengan membuat bentuk navigasi yang tidak umum. 


Sebelum memulai membuat sketsa desain, jelajahi web untuk membantu 
ide-ide. Perhatikan bentuk website secara global, mulai dari tata letak, 
jenis font, pembagian kolom, navigasi, menu utama, dan elemen lain. 
Perhatikan beberapa contoh website yang sesuai dengan bidang atau tema 
sketsa rancangan yang akan dibuat. Buatlah rancangan tata letak yang 


umum agar informasi yang disampaikan tetap akrab dengan audiens. 


Buatlah sketsa lebih dari satu sebagai alternatif sehingga klien dapat 
memilih bentuk rancangan yang sesuai. Hindari bentuk rancangan yang 


hanya mengandalkan perbedaan warna, sedangkan tata letak (layout) 


masih sama. Intinya, desain yang satu dengan yang lainnya memiliki 


perbedaan layout dan warna. 


Ketika Anda menampilkan desain sketsa atau mock-up, bukan berarti 
bentuk final sketsa, melainkan untuk mendapatkan masukan dari klien. 
Jangan mudah kecewa jika klien berubah pikiran dengan desain yang 
telah dibuat. Yang perlu diingat adalah bahwa website tersebut milik 
klien, bukan milik Anda. Oleh karena itu, jika banyak perubahan di sana- 
sini, terima saja sebagai saran. Jangan pernah memaksa desain Anda harus 


diterima oleh klien, keputusan terakhir ada di tangan klien. 


1.1.6 Memilih Sketsa 


Diskusi terakhir dengan klien atau stakeholder memberikan masukan 
yang positif. Semua perubahan dan kritikan dari stakeholder harus ter- 
dokumentasi dengan benar, sehingga pada saat dipresentasikan sudah 
sesuai dengan pilihan terakhir dari klien. Pada saat menunjukkan sketsa 


terakhir, usahakan agar stakeholder puas dengan senyum lebar. 


11.7 Mengambil Keputusan 


Proses desain ulang bermuara pada komunikasi dengan klien Anda. 
Beberapa klien sudah mengetahui apa yang mereka inginkan, namun 
umumnya mereka masih membutuhkan pihak luar seperti Anda untuk 
membimbing mereka. Stakeholder ingin melihat warna mock-up agar 
dapat terlihat secara nyata meskipun masih dalam bentuk gambar. Untuk 
pemilihan warna dan teknik pembuatan mock-up akan dibahas pada sesi 


berikutnya dalam buku ini. 


1,2 WEB DEVELOPER TEAM 


Pembentukan tim dalam sebuah bisnis pengembangan web (web 


development) sangat penting untuk menghasilkan tampilan website 


profesional. Pada saat memutuskan untuk membentuk tim web, banyak 
variabel yang harus diperhitungkan. Misalnya, jika bisa Anda meng- 
gunakan website sebagai alat pemasaran untuk menghadirkan produk dan 


layanan, cukup membuat website statis yang akan diperbarui secara 
berkala. 


Tim web Anda dapat terdiri atas web master tunggal atau beberapa orang. 
Jika update informasi dilakukan dalam jangka waktu lama (misal dua 
bulan) masih dapat diatasi, namun jika update informasi dilakukan dalam 
hitungan hari atau bahkan menit maka perlu tim khusus yang bisa terdiri 
atas administrator sistem, programmer aplikasi web, web master, dan 


manajer proyek. 


Untuk studi kasus, di sini akan dibahas tim web kompilasi untuk peru- 
sahaan e-Commerce kecil hingga menegah. Skema ini bukan sebagai 


peraturan, namun hanya sebatas panduan saja. 


1.21 Project Manager 


Proyek manajer adalah kunci untuk tim sukses yang bertanggung jawab 
lebih dari sekadar membuat website. Manajer proyek bertanggung jawab 
untuk anggota individu dalam tim, komunikasi dan tindak lanjut yang 
harus dilakukan. Manaje proyek tidak memerlukan kemampuan pemrog- 
raman atau jaringan. Meskipun begitu, pengetahuan secara teknis jauh 
lebih baik. Manajer proyek akan mewakili tim, dan harus mampu 
berbicara dengan cerdas. Salah satu tugas manajer proyek yang paling 
penting adalah mengumpulkan persyaratan situs dan memahami harapan 
klien. Mereka harus memahami ruang lingkup proyek untuk menyam- 


paikan gagasan kepada anggota tim secara benar. 


Keterampilan komunikasi lisan dan tertulis secara baik juga sangat 
penting, seperti manajemen waktu dan keterampilan waktu. Manajer 


proyek harus memiliki kemampuan untuk memimpin anggota tim, 


mengelola sumber daya, siap dan percaya diri untuk berbicara dengan 
manajemen dan klien mengenai kemajuan dalam tim. Secara umum, 
persyaratan minimum yang baik untuk posisi ini adalah tiga sampai lima 


tahun pengalaman di bidangnya. 


12.2 Web Master 


Web master berasal dari kata web dan master, disebut juga web architect, 
web developer, site author, atau site administrator adalah orang yang 
bertanggung jawab untuk menjaga sebuah atau beberapa website. Tugas 
web master bisa termasuk memastikan server berjalan dengan baik, pe- 
rangkat keras dan lunak beroperasi dengan baik, merancang web, meng- 
hasilkan dan merevisi halaman web, menguji sistem, membalas komenter 


pengguna, dan memeriksa lalu lintas melalui website. 


Secara umum, web master profesional harus memiliki pengalaman dalam 
perangkat lunak transaksi berbasis web, perangkat lunak proses pem- 
bayaran, perangkat lunak keamanan. Web master umumnya memiliki 
kemampuan menulis program dengan HTML yang digunakan untuk 
menciptakan halaman website statis. Namun, jika yang dikelola adalah 
website dinamis, biasanya harus sudah familier dengan script seperti 
JavaScript, PHP, dan Perl. 


Web master juga dituntut untuk mengetahui cara mengonfiguasi server 
web, seperti Apache HTTP Server (Apache) atau Internet Information 
Services (IIS), dan menjadi administrator server. Web master juga dapat 
bertindak sebagai perancang website dalam skala kecil. Tanggung jawab 
web master adalah mengatur dan mengelola hak akses pengguna yang 
berbeda dalam sebuah website, dan mengatur tampilan navigasi. Penem- 
patan konten menjadi bagian dari tugas seorang web master, namun tidak 


termasuk membuat konten. 
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Web master harus memiliki kemampuan menulis yang baik, dan 
bertanggung jawab untuk tata bahasa dan ejaan, serta bekerja sama 
dengan klien website dan Manajer Proyek (Project Manager) untuk 
menentukan isi dan tata letak website. Web master mungkin juga 
bertanggung jawab untuk desain grafis, namun tergantung pada ukuran 
website. Pengetahuan tentang animasi Flsh, Adobe Photoshop, serta 
Visual Basic lebih disukai. 


Pemahaman tentang database berbasis SOL atau database lain, dan 
memahami cara berkomunikasi dengan aplikasi web server sangat disa- 
rankan. Persyaratan minimum untuk posisi ini setidaknya tiga sampai 


lima tahun sebagai persyaratan utama. 


1.2.3 Application Developer 


Application Developer bertanggung jawab untuk mengembangkan fungsi 
sisi server untuk aplikasi berbasis web. Pekerjaan teknis ini bekerja dengan 
semua aspek dari server dan database. Memiliki kemampuan bahasa 
pemrograman internet umum, termasuk PERL, CGI, ActiveX, ASP, Java, 
dan lain-lain. Pengalaman terhadap sistem jaringan IP, pengembangan 
database, dan pemahaman tentang sistem operasi sangat penting. Mereka 
harus dapat bekerja sama dengan manajer proyek untuk menganalisis dan 
menafsirkan kebutuhan klien dan merekomentasikan solusi, memiliki 
keterampilan memecahkan masalah hasil analisis. Untuk dapat mendu- 
duki posisi ini, dibutuhkan pengalaman minimal dua hingga empat 


tahun. 


1.2.4 System Administrator 


Seorang System Administrator yang baik memiliki kemampuan untuk 
membuat perbedaan dalam sebuah website yang andal. Website disebut 
baik jika dapat beroperasi dalam lingkungan yang aman dan stabil. 


Administrator sistem umumnya bertanggung jawab untuk membangun, 


memelihara, dan mengamankan server web, aplikasi dan database dalam 


arsitektur internet. 


Jika sistem operasi yang digunakan berbasis Windows, diperlukan penga- 
laman dan keterampilan mengelola Internet Information Server (IIS). 
Namun, jika sistem operasi yang digunakan berbasis Unix, maka seorang 
administrator sistem memiliki keterampilan mengatasi masalah Firewall 
dan server web Apache. Namun itu semua bergantung pada skala peru- 
sahaan. Jika perusahaan kecil, tidak perlu memiliki server host sendiri 
karena harus memperhitungkan backup, UPS, monitoring situs, redu- 
dansi, pemeliharaan server, keamanan, dan keandalan secara keseluruhan. 
Kadang-kadang perusahaan skala kecil lebih menyukai memanfaatkan 
penyedia jasa host (web hosting) yang harganya sangat terjangkau. Untuk 
posisi ini, diperlukaan keterampilan dan kemampuan administrasi ja- 


ringan minimal empat hingga enam tahun. 


1.2.5 Web Designer 


Web designer adalah seorang profesional dalam desain grafis dan industri 
seni grafis yang merangkai gambar, tipografi, atau grafis bergerak untuk 
menghasilkan sebuah desain yang menarik. Seorang desainer grafis 
menciptakan grafis terutama untuk diterbitkan dalam media cetak 
maupun elektronik, seperti brosur (kadang-kadang) dan iklan. Mereka 
juga kadang-kadang bertanggung jawab terhadap type setting, ilustrasi, 


user interface, dan desain web. 


Seperti telah dijelaskan pada bagian sebelumnya, web master sering 
memiliki dasar-dasar desain grafis. Namun, jika memiliki sumber daya 
seorang desainer grafis akan sangat membantu meningkatkan tim dalam 
mengembangkan website. Desainer grafis dapat membantu mempercepat 
gambar dan kebutuhan grafis lainnya. Tanggung jawab inti seorang 
desainer grafis adalah untuk menyajikan informasi secara baik ketika 


diakses dan mudah diingat. 
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Persyaratan utama untuk dapat menduduki posisi ini harus menguasai 
dan mahir mengoperasikan aplikasi pengolah citra standar industri 
seperti Adobe Photoshop, Adobe Firework, CorelDraw, dan Adobe 
Illustrator. Pengalaman desain grafis di lingkungan web setidaknya 
minimal dua tahun, sedangkan pengalaman bidang seni rupa atau bidang 


terkait minimal empat tahun. 


1,3 SOFTWARE IMAGE PROCESSING 


Perangkat lunak pengolah citra adalah penggunaan algoritma komputer 
untuk melakukan pemrosesan gambar digital. Perangkat lunak ini di- 
manfaatkan untuk bidang industri dengan output tercetak maupun 
berbasis web. Dalam ilmu pencitraan, pengolah citra adalah setiap bentuk 
pengolahan sinyal yang diinput adalah gambar dalam bentuk foto atau 


frame video. 


Sebagian besar teknik pengolahan citra melibatkan perlakuan gambar 
sebagai sinyal dua dimensi dan menerapkan teknik pemrosesan sinyal 
standar tersebut. Pengolahan citra biasanya mengacu pada pengolahan 
citra digital, namun pengolahan citra dalam bentuk optik maupun analog 


juga memungkinkan untuk dilakukan. 


Hingga saat ini sudah berkembang perangkat lunak untuk mengolah 
gambar berbasis Windows, Unix, maupun Mac OS yang bersifat gratis 
maupun komersial. Perangkat lunak berbasis Windows (Win), Mac OS 


(Mac), dan Unix (Unix), di antaranya sebagai berikut. 


131 Adobe Photoshop 


Adobe Photoshop atau biasa disebut Photoshop adalah perangkat lunak 
berbasis bitmap untuk kebutuhan editor citra yang diproduksi oleh 
Adobe Systems, dikhususkan untuk mengedit foto/gambar dan penam- 


bahan efek khusus. Perangkat lunak ini sangat populer karena dapat 
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digunakan untuk berbagai macam kebutuhan bidang fotografi, per- 


cetakan, periklanan, animasi, dan web. 


Dalam bidang fotografi misalnya, Adobe Photoshop sangat familier untuk 
mengedit foto, memanipulasi foto, menggabungkan beberapa foto, meng- 
ganti warna, menghilangkan objek dalam foto, dan masih banyak lagi 
kemampuan lainnya. Sedangkan bidang percetakan dan periklanan, 
Adobe Photoshop sangat andal digunakan untuk mendesain tampilan 
yang impresif dengan resolusi tinggi. Outputnya bisa dalam bentuk 


baleho, poster, pamflet, billboard, dan lain-lain. 


Adobe Photoshop juga sangat piawai untuk menangani masalah desain 
web dengan teknik Grid. Intinya, Adobe Photoshop merupakan perang- 
kat lunak yang andal untuk menangani pekerjaan yang sulit sekalipun. 
Perangkat lunak ini sudah mencapai versi 13 atau lebih dikenal dengan 
Adobe Photoshop CS6 yang dirilis pada tanggal 23 April 2012, dan 
perangkat lunak ini dapat dijalankan pada platform Universal Mac OS 


dan Windows. 


Gambar 1.1 Logo Adobe Photoshop CS6 
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13.2 PaintShop Pro 


PaintShop Pro awalnya diciptakan sebagai editor grafis raster saja, 
kemudian dalam seri untuk sistem operasi Windows ditambahkan fitur 
sehingga bisa digunakan untuk mengedit vektor. Perangkat lunak ini, 
awalnya diterbitkan oleh Jasc Sofware Minneapolis. Pada bulan Oktober 
2004, Corel Corporation dibeli oleh Jasc Software dan hak distribusi 
untuk Paint Shop Pro. Fungsi PSP dapat diperpanjang dengan plugin 
Photoshop yang kompatibel. 


Meskipun sering ditulis sebagai Paint Shop Pro, situs Corel menunjukkan 
nama untuk produk sebagai PaintShop Pro. Edisi X telah dijual dengan 
dua versi, yaitu PaintShop Pro yang merupakan program pengeditan 
dasar, dan PaintShop Pro Ultimate yang dikemas bundel dalam program 


mandiri lainnya. 
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Gambar 1.2 Tampilan fitur Corel PaintShop Pro 


(Sumber: http://www.gopaintshoppro.co.uk/2011/12/whats-new-in- 
corel-paintshop-pro-x4.html) 
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1.3.3 Adobe Fireworks 


Adobe Fireworks (sebelumnya Macromedia Fireworks) adalah editor 
grafis berbasis bitmap dan vektor, sama dengan PaintShop Pro. Pada 
awalnya dikembangkan oleh Macromedia XRES kemudian pada tahun 
2005 diakuisisi oleh Adobe Corporate. Fireworks diciptakan untuk web 
designer guna membantu menciptakan prototipe website dan interface 


aplikasi secara cepat. 


Fitur-fiturnya meliputi beberapa alat, di antaranya slice yang berfungsi 
untuk mengiris objek menjadi beberapa bagian dan memiliki kemampuan 
untuk menambahkan hotspot. Perangkat lunak ini juga dirancang agar 
dapat terintegrasi dengan produk Adobe lainnya, seperti Adobe Dream- 
weaver dan Adobe Flash. Aplikasi ini tersedia sebagai produk mandiri 
atau dibundel dalam Adobe Creative Suit (Adobe CS), versi sebelumnya 


dibundel dengan nama Macromedia Studio. 


Gambar 1.3 Tampilan fitur Adobe Firework CS6 


(Sumber: http://www.creativemac.com/article/First-Look:-Adobe- 
Fireworks-CS3-1226438) 
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Pada tanggal 6 Mei 2013, Adobe mengumumkan bahwa Fireworks akan 
dihapus. Adobe akan terus memberikan update keamanan dan mungkin 
perbaikan bug untuk versi yang terbaru, namun tidak memiliki rencana 
untuk menambahkan fitur baru di luar yang sudah ada pada Fireworks 
CS6. Petisi Adobe Fireworks merilis untuk menciptakan Fireworks 


berbasis Open Source bagi masyarakat luas. 


1.3.4 Corel Photo-Paint 


Corel Photo-Paint adalah editor grafis raster yang dikembangkan dan 
dipasarkan oleh Corel sejak tahun 1992. Corel yang saat ini di pasar 
perangkat lunak, berjalan pada sistem operasi Windows yang sebelumnya 
memiliki versi untuk Linux (Versi 9, membutuhkan Wine) dan Mac OS 
(pada versi 11). Pesaing utama perangkat lunak ini adalah Adobe 
Photoshop. Pada tahun 2006, Corel merilis versi 13 sebagai Photo-Paint 
X3 menggunakan konvensi penamaan untuk merilis versi berikutnya dari 
CorelDraw, termasuk Photo-Paint di CorelDraw Graphic Suite. Versi 
terakhir saat ini adalah Photo-Paint X6 yang telah dipasarkan dalam edisi 
terbatas Photo-Paint, disebut Corel Photo-Paint SELECT dengan hard- 


ware pemindaian HP, misalnya scanner HP ScanJet 5P. 


Perangkat lunak ini dapat membuka dan mengonversi format vektor dari 
CorelDraw dan Adobe Illustrator, dan dapat membuka format lain, 
termasuk file ekstensi PNG, JPG, dan GIF. Program ini juga mendukung 
fungsi plug-in termasuk yang dikembangkan untuk platform Adobe 
Photoshop dan PaintShop Pro. 


Corel Photo-Paint tersedia dalam bahasa Inggris, Jerman, Perancis, Itali, 
Belanda, Spanyol, Portugis, Brasil, Swedia, Finlandia, Polandia, Ceko, 


Rusia, Hungaria, dan Turki. 


17 


Corel 


PHOTO-PAINT: 


(C) 2012 Corel Corporation. Reservados todos los derechos 


Cargando aplicacion 


Gambar 1.4 Tampilan CorelPhoto Paint X6 
(Sumber: http://corelphotopaint.jimdo.com/manual-basico/) 


1,4 WEB PROGRAMMING 


Apa yang dimaksud Pemrograman Web (web programming)? Pemrog- 
raman adalah seni yang rumit untuk memberitahukan pada komputer 
apa yang harus dilakukan. Pemrograman memberikan instruksi tertulis 
secara logis bahwa komputer dapat memahami apa yang diperintahkan. 
Pada dasarnya, ketika menulis program sebenarnya memberikan petunjuk 
pada komputer langkah-langkah instruksi kecil, dan komputer akan 
membaca tiap baris secara berurutan dari kiri ke kanan dan dari atas ke 
bawah. Pemrograman memungkinkan untuk membuat perangkat lunak 
baru dan memiliki komputer untuk melakukan hal-hal yang baru. Semua 
pemrograman web adalah sama, kecuali Anda menulis aplikasi atau 


halaman web yang digunakan oleh web browser. 
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141 Bagaimana Pemrograman Web Bekerja? 
chtml» 

chead» 

stitle»My Web Pagex/title» 
c/head» 

«body» 

« ?php 

print date("Y/m/a") : 

P5 

«/body» 

«/html 


Perhatikan script di atas, ketika Anda mengakses halaman website 
menggunakan browser, web server akan mengurai atau membaca baris 
halaman HTML dengan baris sebuah program, misal kode PHP, maka 
kode tersebut akan dieksekusi. Hasilnya, pada sisi browser akan mencetak 
tanggal tersebut secara dinamis. Jika sekarang adalah tanggal 17 Novem- 
ber 2013, maka akan tercetak 2013-11-17. Ini yang disebut dengan web 


dinamis. 


14.2 Pemrograman Web yang Baik 


Pemrograman web memungkinkan untuk mengubah hal yang paling 
sederhana, halaman web statis menjadi dinamis, menghasilkan web 2.0. 
Hal ini memungkinkan bagi orang lain untuk berinteraksi dengan website 
dan menggunakan aplikasi di komputer manapun selama memiliki akses 
internet. Pemrograman website dianggap lebih mudah dibandingkan 


aplikasi pemrograman yang dijalankan langsung melalui komputer. 


Pada dasarnya, jika ingin membuat atau mengedit apa pun pada website 
secara dinamis seperti forum, buku tamu atau bahkan mengirimkan 
formulir, maka perlu mengetahui teknis bagaimana melakukan beberapa 


program website. 


1.4.3 Mengenal Bahasa Pemrograman Web 


Ada beberapa bahasa pemrograman yang tersedia untuk mengembangkan 


web. Semua pemrograman web dilakukan dengan bahasa pemrograman 
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web juga. Bahasa ini mencakup teknologi statis, seperti HTML, XHTML, 
CSS, JavaScript, dan XML. Namun sebagian besar pemrograman web 
dilakukan menggunakan bahasa pemrograman web pada sisi server. Kode 
tersebut akan berjalan pada server kemudian memberikan informasi statis 
ke web browser. Beberapa bahasa pemrograman web yang populer, di 
antaranya PHP, ASP.NET, Ruby on Rails, Perl, ASP Klasik, Python, dan 
JSP. 


144 PHP: Hypertext Preprocessor 


PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan 
atau disisipkan ke dalam tag HTML. PHP banyak dipakai untuk mem- 
program situs web dinamis. PHP dapat digunakan pada hampir semua 
platform Windows atau Linux varian dan berbagai jenis web server, 


termasuk Apache dan Internet Information System (IIS). 


PHP juga dapat digunakan untuk mengelola email, menghubungkan ke 
website lain atau server lain, pengelolaan informasi, menyimpan infor- 
masi ke dalam database, memotong (crop) secara otomatis, membaca 
dokumen PDF atau DOC secara langsung, membuat cookie pada web 
browser, dan masih banyak lagi. PHP juga dapat terhubung ke hampir 
semua jenis database di dunia, namun yang paling populer adalah 


hubungannya dengan MySOL. 


PHP juga mendukung fungsi (blok kode yang dapat melakukan hal-hal 
tertentu secara berulang) dan objek (kumpulan fungsi yang mewakili 
objek dunia nyata seperti buku atau pengguna). Untuk menulis kode PHP 
cukup menggunakan Notepad biasa, namun ada beberapa PHP Editor 


yang populer dan mendukung sintaks maupun fitur lainnya. 


Untuk mempelajari PHP, di internet sudah banyak yang menyediakan 


tutorial secara gratis maupun komersial. 
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14.5 ASP.NET 


ASP.NET adalah server-side web application framework yang dirancang 
untuk pengembangan web guna menghasilkan halaman web dinamis. 
Aplikasi ini dikembangkan oleh Microsoft untuk memungkinkan 
pemrograman website yang dinamis (dynamic web), aplikasi web (web 
application), dan layanan web (web services). Pertama kali dirilis pada 
Januari 2002 dengan versi 1.0 dari .NET Framework dan merupakan 
penerus teknologi Microsoft Active Server Pages (ASP). ASP.NET 
dibangun pada Common Language Runtime (CLR), yang memungkinkan 
programmer untuk menulis kode ASP.NET menggunakan dukungan 
bahasa NET. 


ASP.NET harus digunakan pada server Windows IIS yang memiliki 
library NET sudah terpasang. ASP.NET dapat digunakan untuk menge- 
lola email, menghubungkan ke situs atau server lain, mengelola informasi 
form, menyimpan informasi dalam database, membuat cookie di dalam 


browser, dan masih banyak lagi. 


ASP.NET juga bergantung pada fungsi dan objek. ASP.NET utamanya 
adalah teks namun sebagian besar menggunakan Microsoft Visual Studio 
karena fitur yang lengkap, mampu menyusun dan menguji semua kode 


dalam satu program. 


14.6 Ruby on Rails 


Ruby on Rails adalah bahasa pemrograman web yang paling populer saat 
ini. Aplikasi merupakan server-side, dan framework aplikasi web gratis 
yang memungkinkan untuk membuat halaman dinamis maupun aplikasi 
web secara cepat. Kode Ruby on Rails ditafsirkan oleh web server yang 
kemudian hasil halaman web ditampilkan pada web browser yang meng- 
aksesnya. Hal ini menjadi alasan program ini lebih populer sebagai 


kekuatan terhadap orang yang baru mengenalnya. 
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Ruby on Rails menggunakan bahasa Ruby, dan dapat digunakan pada 
varian server Windows atau Linux namun sangat menyukai sistem Mac 
OS. Ruby on Rails dapat digunakan untuk setiap fungsi pemrograman 
web yang khas, seperti mengelola email, mengubungkan ke situs atau 
server lain, pengolahan informasi, menyimpan informasi ke dalam 
database, membuat cookie di web browser, dan masih banyak lagi. Hal ini 
dapat terhubung ke hampir semua jenis database di dunia, namun paling 


sering digunakan dalam hubungannya dengan MySOL. 


Ruby on Rails menggunakan arsitektur Model-View-Controller (MVC) 
untuk mengatur aplikasi pemrograman. Hal ini menyediakan scaffolding 
yang cepat dapat membangun sebagian besar model dan pandangan yang 
dibutuhkan untuk website dasar. Anda dapat menggunakan kode Ruby 


on Rails dalam editor teks apa pun. 


14.7 Peri 


Perl merupakan salah satu bahasa pemrograman web tertua yang ada saat 
ini. Hampir setiap server berbasis Linux dilengkapi dukungan bahasa 
tersebut. Perl adalah server-side, bahasa script yang dapat menghasilkan 
halaman web dinamis atau aplikasi web lainnya. Kode Perl seperti PHP, 
dijalankan pada server kemudian memberikan hasilnya ke web browser 
dalam bentuk HTML. 


Perl sudah ada sejak tahun 1987, tersedia hampir di semua platform 
Windows atau Linux. Perl pada awalnya dikembangkan untuk memani- 
pulasi teks tetapi sekarang dapat digunakan untuk mengelola email, 
menghubungkan situs web atau server lain, menyimpan informasi ke 
dalam database, dan lain-lain. Perl juga mendukung subroutines (blok 


kode yang dapat melakukan hal-hal tertentu secara berulang). 


Perl meminjam banyak sintaks dari bahasa pemrograman C. Sintaks 


adalah kata-kata dan cara bahwa bahasa harus digunakan agar bisa 
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bekerja. Perl dirancang agar menjadi praktis sehingga dapat mudah 
dimengerti namun dapat menjadi kompleks. Bahasa pemrograman 
tingkat tinggi seperti PHP menjadi pilihan terbaik untuk programmer 
awal dibanding harus menggunakan Perl. Untuk menulis kode Perl, dapat 


menggunakan editor teks apa pun. 


1.4.8 Active Server Pages (ASP) 
Active Server Pages (ASP), juga dikenal sengai Classic ASP atau ASP 


Classic merupakan mesin script pertama berbasis server-side yang 
dimiliki Microsoft untuk menghasilkan halaman web dinamis. Awalnya 
dirilis sebagai add-on untuk Internet Information System (IIS) melalui 
Windows NT Option Pack (1996), kemudian dimasukkan sebagai 
komponen bebas dari Windows Server (sejak rilis awal Windows 2000 
Server). ASP.NET, pertama kali dirilis Januari 2002, menggantikan ASP. 


ASP sangat mirip dengan PHP. Hal ini terutama dukungan hanya pada 
server Windows saja, namun sudah ada beberapa upaya agar dapat 
bekerja pada server Linux seperti Sun Chilisoft. ASP dapat digunakan 
untuk mengirimkan email, terhubung ke server lain, proses berupa 
informasi, menyimpan informasi ke dalam database, membuat cookies 
atau sesi di web server, dan masih banyak lagi. ASP juga dapat terhubung 
ke beberapa jenis database, namun lebih sering menggunakan MS SOL. 


ASP juga mendukung fungsi dan objek. 


ASP 2.0 menyediakan enam objek built-in: Aplikasi, ASPError, Permin- 
taan, Respons, Server, dan Session. Session merupakan sesi yang memper- 
tahankan keadaan variabel dari halaman ke halaman. Dukungan mesin 
Active Scripting dari Component Object Model (COM) memungkinkan 
situs ASP mengakses fungsi kompilasi di perpustakaan seperti DLL. 
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1.4.9 Common Gateway Interface (CGI) 


CGI adalah metode standar yang digunakan untuk menghasilkan konten 
dinamis pada halaman web dan aplikasi web. Ketika diimplementasikan 
web server menyediakan sebuah antarmuka antar-web server dan prog- 
ram yang menghasilkan konten web. Program ini dikenal sebagai CGI 


Script atau CGIS, mereka umunya ditulis dalam bahasa scripting. 


Meskipun ada beberapa orang yang berpikir bahwa CGI bukanlah bahasa 
pemrograman, namun hanya sebuah metode atau protokol (yang sangat 


tua) untuk antarmuka aplikasi eksternal dengan server. 


NCSA menggambarkan CGI: "A plain HTML document that the Web 
daemon retrieves is static, which means it exists in a constant state: a text file 
that doesn't change. A CGI program, on the other hand, is executed in real- 


time, s0 that it can output dynamic information". 


14.10 Python 


Python adalah bahasa pemrograman yang tersedia secara bebas dan dapat 
memecahkan masalah komputer semudah menuliskan pemikiran sese- 
orang tentang solusi. Hal ini dapat ditulis sekali dan berjalan pada hampir 
semua komputer tanpa harus mengubah program. Phyton dapat digu- 
nakan untuk membuat halaman web dinamis maupun aplikasi web. Kode 
python ditafsirkan oleh web server kemudian menampilkan halaman web 


ke browser yang mengaksesnya. 


Python tersedia pada berbagai platform sehingga dapat digunakan untuk 
mengelola email, menghubungkan ke situs atau server lain, memproses 
informasi form, menyimpan informasi ke dalam database, membuat 
cookie pada web browser, dan masih banyak lagi. Phyton dapat ter- 
hubung ke semua jenis database, namun hubungan yang paling kuat 
adalah database yang gratis, MySOL. Python mendukung object oriented, 


imperative, dan functional programming models. 
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Python sangat mudah dipahami sehingga merupakan bahasa yang bagus 
bagi programmer pemula untuk belajar pemrograman. Python juga 
termasuk bahasa pemrograman yang sangat mudah dibaca. Hal ini sering 
digunakan terutama kata kunci bahasa Inggris, di mana bahasa pemrog- 


raman lain menggunakan tanda baca. 


1.411 Java Server Pages (JSP) 


Java Server Pages adalah teknologi yang dapat digunakan untuk membuat 
halaman web yang dinamis berdasarkan HTML, XML, atau jenis 
dokumen lainnya. Dirilis pada tahun 1999 oleh Sun Microsystem, JSP 
mirip dengan PHP namun menggunakan bahasa Java. Untuk dapat 
menjalankan JSP, diperlukan web server yang kompatibel dengan Servlet, 


seperti Apache Tomcat atau Jetty. 


JSP dapat tertanam dalam HTML sama halnya dengan PHP. Kode JSP 
diterjemahkan oleh web server yang kemudian diproses dan hasilnya 
ditampilkan ke web browser yang mengaksesnya dalam bentuk halaman 
web. JSP dapat dikompilasi on-the-fly ke dalam Servlet oleh kompiler JSP. 
Bahasa pemrograman ini dapat digunakan pada hampir semua platform 
yang menggunakan Apache Tomcat. JSP dapat digunakan untuk menge- 
lola email, menghubungkan ke situs atau server lain, pengolahan infor- 
masi form, menyimpan informasi ke dalam database, membuat cookie di 


web browser, dan masih banyak lagi. 


JSP dapat digunakan secara terpisah atau sebagai komponen dari server- 
side desain Model-View-Controller, umumnya dengan JavaBeans sebagai 
Model dan Java Servlet (atau framework seperti Apache Struts) sebagai 
Controller. Bahasa pemrograman ini memungkinkan kode Java dan 
tindakan tertentu yang telah ditetapkan untuk disisipkan dengan konten 
web markup statis (static web markup content), halaman hasilnya disusun 


dan dijalankan pada server untuk mengirimkan sebuah dokumen. 
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1,5 SOFTWARE TExT EDITOR 


Text Editor adalah jenis program yang digunakan untuk mengedit file 
teks biasa. Text Editor sering disediakan dengan sistem operasi atau paket 
pengembangan perangkat lunak, dan dapat digunakan untuk mengubah 


file konfigurasi maupun bahasa pemrograman dari kode sumber aslinya. 


Ada perbedaan yang mendasar antara file teks biasa yang dibuat oleh Text 
Editor dan file dokumen yang dibuat oleh pengolah kata, seperti 
Microsoft Word, WordPerfect, dan OpenOffice. File text biasa (Plain 
Text) menggunakan satu set karakter sederhana, seperti ASCII untuk 
mewakili angka, huruf, dan beberapa simbol. Satu-satunya karakter non- 
cetak dalam file yang dapat digunakan untuk memformat teks adalah 


baris baru, tab, dan form feed. 


Sedangkan dokumen pengolah kata pada umumnya berisi teks yang 
memiliki format, seperti tebal (bold), miring (italic), maupun garis bawah 
(underscore) pada beberapa font, dan tampilan harus terstruktur ke kolom 
dan tabel. Kemampuan ini awalnya hanya dikaitkan dengan desktop 


publishing, namun sekarang tersedia pada pengolah kata sederhana. 


Beberapa Text Editor memiliki fitur sangat kecil dan sederhana, 
sementara ada beberapa text editor lain menawarkan fungsi luas dan 
kompleks. Misalnya, Unix dan Linux — dalam sistem operasi memiliki 
Editor VI (atau varian), namun banyak juga yang mencakup editor 
Emacs. Sedangkan sistem operasi Windows menyediakan Notepad 
sederhana, meskipun banyak programmer lebih menyukai text editor lain 


yang lebih banyak fiturnya. 


Sistem operasi Apple Macintosh klasik Mac OS menyediakan SimpleText 
asli, kemudian ketika digantikan Mac OS X menjadi TextEdit, yang 
menggabungkan fitur dari text editor dengan pengolah kata, seperti 


rulers, margins dan multiple selection. Beberapa editor, seperti WordStart 
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memiliki model operasi ganda yang mengizinkan menjadi text editor atau 


pengolah kata. 


Berdasarkan fitur yang dimiliki oleh Text Editor, ada beberapa hal yang 


penting ketika menggunakan aplikasi tersebut untuk membuat halaman 


web maupun bahasa pemrograman lainnya. Fitur-fitur penting yang 


wajib ada, yaitu: 


String searching algorithm: pencarian string dengan menggantikan 
string. Ada perbedaan metode yang digunakan pada masing-masing 
text editor. Umumnya Search and Replace, Conditional Search and 


Replace, Unconditional Search and Replace. 


Cut, Copy, and Paste: umumnya text editor menyediakan metode 
untuk menduplikasi dan memindahkan teks dalam file yang sama 


atau file yang berbeda. 


Text Formatting: text editor sering menyediakan fitur format dasar, 
seperti line wrap, word wrap, auto-indentation, bullet list, comment, 


dan lain-lain. 


Undo and Redo: seperti pengolah kata, text editor memberikan cara 
untuk membatalkan (undo) dan mengulang edit terakhir (redo). 
Editor modern atau yang lebih kompleks biasanya memberikan 
history beberapa tingkat sehingga ketika menggunakan perintah undo 
maka akan kembali pada dokumen yang terakhir disunting sesuai 
jumlah undo. Perintah redo akan kembali ke bagian edit berikutnya 
"forward" terhadap perubahan terbaru. Jumlah perubahan sangat 


bergantung pada text editor yang sering dikonfigurasi oleh pengguna. 


Data Transformation: membaca atau menggabungkan isi file teks lain 
ke dalam file saat ini yang sedang diedit. Beberapa text editor menye- 
diakan cara untuk menyisipkan keluaran (output) dari perintah ke 


operating system's shell. 
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Filtering: beberapa text editor canggih memungkinkan editor untuk 
mengirimkan semua atau bagian dari file yang sedang diedit untuk 
utilitas lain, dan membaca hasilnya kembali ke file pada baris yang 
disaring. Misalnya, berguna untuk menyortir serangkaian baris abjad 


atau numerik, melakukan perhitungan matematika, dan lain-lain. 


Syntax highlight: perangkat lunak menyorot kode secara kontekstual 
dan teks lain yang muncul dalam format yang terorganisir atau 
diprediksi. Misalnya, ketika membuat sebuah variabel yang mirip 
maka secara otomatis akan tersorot (contoh variabel iknow dengan 
iknew). 


Hingga saat ini, sudah tersedia beberapa Text Editor profesional yang 


dapat digunakan untuk kebutuhan menulis bahasa pemrograman web. 


Berikut ini beberapa contoh text editor berdasarkan platform (Windows, 


Mac OS, Linux, dan Cross Platform). Tidak semua dijelaskan satu per 


satu, namun hanya sekadar penambah wawasan. Penentuan pemilihan 


text editor bergantung selera masing-masing. 


151 Cross Platform 
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Aptana Studio: text editor berbasis open source Integrated 
Development Environment (IDE) untuk membangun aplikasi web 
Ajax. Berbasis pada Eclipse, mendukung JavaScript, HTML, DOM, 
dan CSS dengan code-completion, outlining, JavaScript debuging, 
error and warning notification and integrated documentation. Plugin 
tambahan memungkinkan Aptana Studio mendukung Ruby on Rails, 
PHP, Phyton, Perl, Adobe AIR, Apple iPhone, dan Nokia WRT (Web 
Runtime). Perangkat lunak ini tersedia dalam Windows, Mac OS X, 
dan Linux, atau plugin untuk Eclipse. Untuk mengunduh aplikasi ini, 


silakan kunjungi website http://www.aptana.com/. 
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Gambar 1.5 Tampilan fitur Aptana Studio 


Bluefish: adalah text editor berbasis Open Source yang canggih dan 
terbuka dengan berbagai alat untuk pemrograman pada umumnya 
dan pengembangan website dinamis. Bluefish mendukung beberapa 
bahasa pemrograman, yaitu HTML, XHTML, CSS, XML, PHP, C, 
C--, JavaScript, Java, Google Go, Vala, Ada, D, SOL, ColdFusion, 
JSP, Python, dan Ruby on Nails. Bahasa pemrograman ini tersedia 
dalam berbagai platform, termasuk Linux, Solaris, Mac OS, dan 
Windows. Bluefish dikembangkan di C/GTK-- (GIMP Toolkit) dan 
dapat diintegrasikan dalam GNOME atau dijalankan secara inde- 
penden. Bluefish relatif ringan dan mudah untuk dipelajari, semen- 
tara ini masih menyediakan banyak fitur dari pengembangan yang 
terintegrasi untuk mendukung pemrograman dan pengembangan 


website dinamis. Untuk mengunduh aplikasi ini, silakan kunjungi 


website http://bluefish.openoffice.nl/index.html. 
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“ index.htmi - Bluefish 2.0.0 #|.jo|x 
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Gambar 1.6 Tampilan Bluefish 


Komodo Edit: adalah text editor berbasis Open Source untuk bahasa 
pemrograman dinamis. Saat itu diperkenalkan pada tahun 2007 
untuk melengkapi produk komersial produk Komodo IDE. Dengan 
release versi 4.3, Komodo Edit tertanam pada bagian utama proyek 
Open Komodo. Banyak fitur Komodo tertanam dari Python 
interpreter. Open Komodo menggunakan basis kode Mozilla, ber- 
sama Scintilla, dan dua produk berbagi banyak fitur dan mendukung 
bahasa yang sama (termasuk Python, Perl, Ruby, Tcl, SOL, Smarty, 
CSS, HTML, dan XHTML). Perangkat lunak ini dapat terpasang pada 
platform Linux, Mac OS X, dan Windows). Komponen Editor diim- 
plementasikan menggunakan NPAPI, dengan pandangan Scintilla 
tertanam dalam antarmuka XUL dengan cara yang sama sebagai 


plugin web browser. 


Komodo Edit dan Komodo IDE mendukung kustomisasi pengguna 


melalui plugin dan macro. Komodo plug-in didasarkan pada Mozilla 


Add-ons dan ekstensi dapat dicari, diunduh, dikonfigurasi, dan 
diperbarui dari dalam aplikasi. Ekstensi yang tersedia termasuk fungsi 
list, pipe features, dukungan bahasa tambahan dan perangkat antar- 


muka pengguna. Untuk mengunduh, silakan kunjungi website 


http://www.activestate.com/komodo-edit. 
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Gambar 1.7 Tampilan Komodo Edit 


Sublime Text: adalah text editor cross-platform dan source code 
editor, dengan Python Application Programming Interface (Python 
API). Fungsinya juga ditambahkan dengan plugins, dan perangkat 
lunak ini bukanlah berbasis open source, bukan perangkat lunak 
gratis, namun sebagian besar paket tambahan memiliki lisensi free- 
sotware dan dibangun maupun dikembangkan komunitas. Aplikasi 
ini mendukung berbagai macam bahasa pemrograman, di antaranya 
ASP, ActionScript, C, C#, CSS, HTML, JSON, Java, JSP, JavaScript, 
PHP, Pascal, Perl, Python, Ruby on Rails, SOL, dan lain-lain. Untuk 
mengunduh perangkat lunak ini, silakan kunjungi website 


http://www.sublimetext.com/. 
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(5 Dixamppihtdocsliknowfassetslessliknow.css » (iknow) - Sublime Text -.. — Tire 
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Gambar 1.8 Tampilan SubLime 


Selain contoh di atas, masih banyak lagi Text Editor pada cross-platform, 


yaitu Eclipse, Editra, Emacs, Geany, jEdit, Netbeans, SciTE, dan Vim. 


15.2 Windows 


32 


Notepad2: merupakan text editor open-source untuk platform 
Windows, dengan lisensi perangkat lunak BSD dirilis pada bulan 
April 2004. Perangkat lunak ini ditulis oleh Florian Balmer. Notepad2 
berbasis pada prinsip-prinsip Microsoft Notepad, yaitu kecil (small), 
cepat (fast), dan bermanfaat (usable). Notepad2 mendukung sintaks 
bahasa pemrograman, di antaranya ASP, bahas assembly, C, C--, C#, 
Common Gateway Interface (CGI), Cascading Style Sheet (CSS), 
HTML, JavaScript, NSIS, Pascal, Perl, PHP, Python, SOL, Visual 
Basic (VB), XHTMI, dan XMI. Perangkat ini juga memiliki sintaks 
untuk format file, seperti BAT, DIFF, INF, INI, REG, dan file konfi- 
gurasi. Notepad2 juga memiliki beberapa fitur, yaitu auto inden- 


tation, pencocokan bracket, konversi pengkodean antara ASCII, 


UTF-8, dan format UTF-16, multiple undo/redo, rectangular block 


selection, newline conversion. 


Balmer telah menyatakan bahwa beberapa fitur mungkin tidak akan 
pernah diterapkan pada Notepad2, karena mereka berada di luar 
jangkauan desain dari aplikasi sederhana seperti Notepad. Ini 
termasuk fitur paling diminta Notepad2, antarmuka beberapa 
dokumen. Fitur lain yang hilang seperti code folding, asosiasi file dan 
bookmark tersedia melalui modifikasi, terkait homepage. Dimulai 
dengan versi 4.2.25 — RC6, sebelum ditawarkan membangun versi 
x64. Untuk mengunduh perangkat lunak ini, silakan kunjungi 


website http://www.flos-freeware.ch/notepad2.html. 
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Gambar 1.9 Tampilan Notepad 


Notepad---: adalah text editor dan source code editor pada platform 
Windows. Perangkat lunak ini menjadi editor ringan dan kuat untuk 
berbagai bahasa pemrograman maupun scripting. Salah satu kele- 


bihan Notepadd-4- kemampuannya di atas Notepad yang tertanam 
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dalam Windows, di antaranya mendukung pengeditan tab, mengizin- 


kan bekerja dengan beberapa file yang terbuka. 


Perangkat lunak ini didistribusikan sebagai perangkat lunak bebas 
(free). Proyek ini telah diletakkan pada SourceForge.net, di mana 
aplikasi ini telah diunduh lebih dari 27 juta kali dan dua kali 
memenangkan SourceForge Community Award untuk kategori Best 
Developer Tool. Proyek ini disimpan di TuxFamily sejak Juni 2010. 
Untuk menampilkan dan mengedit teks bahasa pemrograman 
maupun source code, Notepadt-4- menggunakan komponen Editor 


Scintilla. Untuk mengunduh software ini, silakan kunjungi website 


http://notepad-plus-plus.org/. 
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Gambar 1.10 Tampilan Notepad4-4 


PSPad: adalah text editor dan source code freeware untuk digunakan 
para programmer. Perangkat lunak ini dikembangkan secara tunggal 
oleh Jan Fiala berkebangsaan Ceko. PSPad ditujukan hanya untuk 


sistem operasi Windows. PSPad memiliki fitur yang berorientasi 


pengembangan perangkat lunak, seperti menyorot sintaks dan 
mengedit hex, serta dirancang sebagai GUI universal untuk mengedit 
banyak bahasa, termasuk PHP, Perl, HTML, dan Java. Fitur lain 
termasuk autocompletion, tab, FTP clients, dan search/replace 
menggunakan kalimat biasa. Antarmuka (interface) PSPad didasarkan 
pada Multiple Document Interface (MDI) dengan tab untuk mengedit 
beberapa file dan memanipulasi dokumen yang terbuka secara baik. 
Perangkat lunak ini dikemas ready-to-run, sehingga tidak ada installer 


yang perlu dijalankan atau biasa dikenal dengan istilah portable. 
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Gambar 1.11 Tampilan PSPad 


Selain yang telah diuraikan di atas, masih banyak lagi Text Editor yang 


berjalan di platform Windows, di antaranya Alleycode HTML Editor, 
ConText, Crimson Editor, HTML-KIT, Microsoft WebMatrix, NoteTab, 
Programmer's Notepad, RJ TextEd, Webocton Scripty, Sublime Text, dan 


phpDesigner. 
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15.3 Mac OS 
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TextWrangler: adalah text editor untuk Mac OS X dari Bare Bones 
Software. Awalnya merupakan produk komersial, namun sejak versi 
2.0 telah menjadi freeware sehingga telah menjadi alternatif software 
untuk editor andalan mereka BBEdit dan penerus freeware sebelum- 
nya BBEdit Lite. 


TextWrangler File Edit Text View Search | Go | Window #! $& Help 
6.0.0 8) Line Number... Hj) ding.txt 
Currentiy Open Documents T & Center Line OR) are Bones Software/US Consti' 
8 untitled text : 
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B untitled text 6 1 Reveal Start United States, in Orde 
ice, insure domestic T 


original wording.txt 


| & US Constitution original wording.txt Reveal End te the general Welfare 
Go to Previous es and our Posterity, | 
Go to Next United States of Ameri: 
2 
3 
4 
s 
6 
? MENNESSNNN SNN: herein granted shati 
mrnesuniteostatesyawnich shall consist of a 
Representatives. 
8 
9 Section. 2. 
10 
1 The House of Representatives shall be compo: 


second Year by the People of the several Sti 
each State shall have the Gualifications rei 
most numerous Branch of the State Leoislatu 


Gambar 1.12 Tampilan TextWrangler 


Seperti BBEdit, TextWrangler bukanlah pengolah kata sehingga tidak 
memiliki format dan pilihan style, hanya dibatasi oleh pengeditan dan 
manipulasi teks biasa. TextWrangler memiliki fitur umum untuk text 
editor seperti penyorotan sintaks (syntax highlighting) untuk berbagai 
bahasa pemrograman, fungsi find and replace, spell check, dan 
comparison file. Selain itu, TextWrangler juga mencakup dukungan 
scripting yang luas menggunakan AppleScript, Python, Perl, Shell 
Script, dan BBEdit's native Text Factories. TextWrangler memung- 
kinkan untuk mencari dan mengganti penggunaan ekspresi reguler. 
Python, Perl, dan Shell Script dapat dijalankan langsung dalam 
program ini. Seperti beberapa editor Mac lainnya, TextWrangler 


dapat membaca dan menyimpan file dalam berbagai pengkodean, 


termasuk Unicode (berbagai pengkodean), ASCII, Latin-1, dan 
Latin-9. TextWrangler ditujukan untuk digunakan para programmer, 
web designer, dan orang lain yang membaca dan menulis kode 


sumber (source code). 


TextMate: adalah text editor berbasis GUI untuk Mac OS X secara 
umum dan dibuat oleh Allan Obgard. Fitur utama Textmate, di 
antaranya kustomisasi deklaratif, tab untuk membuka dokumen, 
recordable macros, folding section and snippets, integrasi shell, extensible 
bundle system. TextMate memungkinkan pengguna untuk membuat 
sendiri mode penyorotan (highlighting) terhadap sintaks mengguna- 
kan versi modifikasi dari format daftar properti Applet ASCII untuk 
menentukan tata bahasa. Setiap titik dokumen diberikan satu bidang 
atau lebih, yang menentukan di mana poin penting dalam dokumen, 
bagaimana seharusnya warna diterapkan, dan bagaimana perilaku 
TextMate pada saat itu. Misalnya, judul salah satu link dalam 


"External link" section has the scope. 


TextMate mendukung perintah user-defined dan user-editable yang 
diinterpretasikan oleh bash, atau penerjemah ditentukan dengan 
shebang. Perintah dapat dikirim ke berbagai jenis input oleh 
TextMate (dokumen saat ini, teks yang dipilih, kata aktual, dan lain- 
lain). Beberapa bundel bahasa tertentu, seperti bash, PHP, atau Ruby 
berisi perintah untuk mengompilasi dan/atau menjalankan dokumen 
saat ini atau proyek. Dalam banyak kasus menghasilkan (STDOUT 
dan STDERR) dari kode yang dijalankan akan menampilkan sebuah 
jendela dalam TextMate. Untuk mengunduh perangkat lunak ini, 


silakan kunjungi website http://macromates.com/. 
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aNora) bs kpax.lisp — kpax 


x kpax.lisp 


(defun get-web-app (name) 
“Get the web application known by name (return nil when not found)" 
(gethash name “web-apps")) 


(defun map-web-apps (function) 
"Apply function on each defined web application and return the result" 
Ck :for web-app :being :the :hash-values :of “web-appst 
:collect (funcall function web-app))) 


(defun ensure-web-app (name options) 
"Either create a new web-app or use an existing one, resetting its options" 
Clet ((web-app (get-web-app name))) 
(unless web-app 
(setf web-app (make-instance 'web-app :name name) 
(gethash name “web-apps") web-app)) 
(setf (get-option-list web-app) options) 
(process-option-list web-app) 
her eh gpo- Sem “ 


Gambar 1.13 Tampilan TextMate 


Smultron: adalah text editor berbasis platform Mac OS X yang 
dirancang untuk pengguna awam hingga mahir, telah dipublikasikan 
sebagai open source dan sekarang bisa didapatkan melalui Mac App 
Store. Bahasa pemrograman yang dapat ditulis menggunakan pe- 
rangkat lunak ini, di antaranya C, C---. LISP, Java, Python, PHP, 
Ruby, HTML, XML, CSS, Prolog, IDL, dan D. Perangkat lunak ini 
pertama kali diperkenalkan dan terdaftar pada Sourceforge.net bulan 
Mei 2004, dibuat dan dikembangkan oleh programmer asal Swedia 
bernama Peter Borg. Komunitas open source berbasis Mac sangat 
mendukung dan memberikan umpan balik terhadap aplikasi ter- 
sebut. Pada 31 Juli 2009, Borg memutuskan untuk tidak mengem- 


bangkan lagi Smultron. 


Software ini terkenal karena pendekatan yang berbeda terhadap 
tampilan kolom dan beberapa tab. Hal ini dapat membantu dalam 
menciptakan website secara cepat, dan memungkinkan pengguna 
untuk memanfaatkan dan menyesuaikan cara pintas (shortcuts) untuk 
implementasi coding lainnya secara cepat, serta organisasi file yang 
lebih rapi. Smultron juga memiliki fitur lain, seperti split file view, line 
wrapping, live find/incremental search, a command line utility, line 


number, dan HTML preview. Selain itu, ada dukungan lokalisasi untuk 


wilayah Swedia, China (simplified and traditional), English, Czech, 


French, Hungarian, Finnish, German, Japanese, Dutch, Italian, dan 


Spanish. 


(iXaKa) 
UOOO « av 5 


8 index.htmil — /Users/steve/Desktop je) 


New Open Save Close Live Find Advanced Find Info  Preferences 
1 | c!DOCTYPE£ HTNL PUBLIC "-//W3C//DTD HTML 4.01 
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. |loose.dtd"s 
2 | chtmMs 
3 | chead- 
4 | ctitlesApplex/titles 
am 5 | cmeta http-eguiv-"con-zent-type" content-"text/html 
BK Benteng . Icharset-utf-$"s 
6 « p-e ntent-'(pics-1.! 
1 cr 2.html" 1 gen true for 
s | “ht in2z1oz1vz: 1) 
k n PSN ai g/ , "1 gen true for 
21 :/ .apple.com" r (n Os vO10))'- 
da wwdc rak: k eguiv-"Expires" content-"Fri, 26 Mar 1999 


Gambar 1.14 Tampilan Smultron 


15.4 Linux 


gEdit: adalah text editor untuk GNOME desktop environment, 
Mac OS X, dan Microsoft Windows. Dirilis pada 12 Februari 
1999, perangkat lunak ini dirancang sebagai text editor pada 
umumnya yang sederhana dan mudah digunakan. Hal ini dapat 
dijadikan alat untuk mengedit source code dan structured text, 


seperti markup language. 


Software ini memuat penyorotan sintaks (syntax highlighting) 
berbagai format text markup dan program kode. Selain itu, 
aplikasi ini juga memiliki tab GUI untuk mengedit banyak file. 
Tab dapat dipindahkan antarjendela (window) oleh pengguna. 
Memiliki kemampuan mengedit file menggunakan pustaka 
GVES. Mendukung sistem pembatalan full undo and redo sama 
baiknya dengan search dan replace. Fitur khusus lainnya, di 
antaranya line numbering, bracket matching, text wrapping, current 


line highlighting, automatic indentation, dan automatic file backup. 
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Gambar 1.15 Tampilan gEdit 


— Kate: adalah text editor dan source code freeware untuk dig. 


—  KDevelop: adalah text editor dan source code freeware untuk dig. 


1,6 APLIKASI WEB SERVER 


Web statis yang umumnya menggunakan file berekstensi HTML maupun 
XHTML tidak memerlukan server, database, maupun penerjemah bahasa. 
Jika Anda meletakkan sebuah file, misalnya index.html di sembarang 
tempat, kemudian dibuka menggunakan web browser (Firefox, Opera, 
Chrome, Internet Exporer, Netscape, Safari, dan lain-lain) maka akan 
ditampilkan sesuai sumber kode (source code) yang ditulis. Hal ini karena 
kode sumber yang ditulis menggunakan bahasa permograman HTML, 


tidak memerlukan database, dan tidak memerlukan bahasa penerjemah. 


Ketika membangun web dinamis memerlukan beberapa aplikasi, yaitu 
server, database, dan penerjemah yang wajib terpasang dalam server, 
komputer pribadi (Personel Computer), maupun komputer jinjing 


(Notebook). Tidak menjadi masalah apabila bekerja dengan server karena 
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semua aplikasi tersebut umumnya sudah terpasang dalam sistem. Anda 
tidak mungkin membuat website dinamis secara langsung di sever. Hal ini 
cukup merepotkan dan membahayakan kelangsungan server. Untuk 
mengatasi hal tersebut, biasanya para web developer membuat web di lokal 
(PC atau Notebook) yang sudah terpasang (install) aplikasi server, 


database, kompiler, dan difungsikan sebagai server. 


Ada beberapa cara untuk menginstal ketiga aplikasi tersebut, yaitu 
memasang satu per satu secara terpisah atau menggunakan aplikasi web 
server yang berisi Server, Database, dan Compiler. Pada bagian ini, akan 
dibahas mengenai beberapa aplikasi web server yang all-in-one sehingga 
tidak perlu repot menginstal secara terpisah. Kelebihan menggunakan 
web server yang all-in-one, kita tidak direpotkan dengan pengaturan 
server yang rumit. Belum lagi jika ada aplikasi lain, misal PHP yang tidak 


dapat berfungsi dengan baik. 


Aplikasi web server yang all-in-one juga dibagi menjadi dua, yaitu 
portable dan installer. Jika menggunakan portable tidak memerlukan 
instalasi, cukup meletakkan aplikasi tersebut di dalam folder kemudian 
jalankan server dan database, maka sistem sudah siap untuk membangun 
web dinamis. Kelebihan lain ketika menggunakan aplikasi yang portable 
adalah memungkinkan menduplikasi web dinamis untuk dijalankan di 


tempat lain tanpa mengubah parameter khusus. 


Lain halnya dengan aplikasi yang harus diinstal, programmer sedikit 
direpotkan apabila web yang sudah dikembangkan akan dipresentasikan 
di tempat lain dan menggunakan notebook orang lain. Database harus 
diekspor terlebih dulu, kemudian semua source code harus diduplikasi. 
Yang terakhir harus mengatur parameter server agar dapat terhubung ke 


database. 
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1.6.1 XAMPP 


Merupakan paket web server berbasis open source yang dapat dipasang 
pada beberapa sistem operasi yang ada (Windows, Linux, dan Mac OS). 
Di dalam aplikasi tersebut sudah memuat software Apache HTTP Server, 
MySOL Database, dan Interpreter untuk menerjemahkan script yang 
ditulis dalam bahasa PHP dan Perl. 


Secara resmi, XAMPP dirancang dengan tujuan untuk digunakan hanya 
sebagai alat pengembangan dan memungkinkan perancang dan program- 
mer website untuk menguji pekerjaan mereka pada komputer tanpa akses 
ke Internet. Untuk memudahkan dalam penggunaan, banyak fitur kea- 


manan penting yang dimatikan (nonaktif) secara default. 
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Gambar 1.16 Tampilan XAMPP untuk Windows 


1.6.2 LAMP 


Akronim LAMP mengacu pada huruf pertama dari empat komponen 
perangkat lunak berbasis open source, yaitu Linux (operating system), 
Apache (web server), MySOL, MariaDB, MongoDB (database management 
system), dan PHP, Perl, atau Pyhton (script languages). 
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Aplikasi ini sangat mudah dipasang (install) di Linux dengan beberapa 
variannya. Ada beberapa panduan cara instalasi aplikasi di Linux, bisa 


ditemukan di internet secara mudah. 


Lam) 


Linux Apache MySOL PHP,Perl,Python 
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Gambar 1.17 Logo Lampp 


1.6.3 Uniform Server 


Uniform Server adalah sebuah aplikasi web server yang sangat ringan 
berbasis open source dan dapat dijalankan pada platform sistem operasi 
Windows. Kurang dari 10MiB, termasuk versi terbaru dari Apache2, 
Perl5, PHP5, MySOL5, phpMyAdmin, dan masih banyak lagi. Tidak 


memerlukan instalasi, cukup unduh, ekstrak, dan jalankan aplikasinya. 


“Start/Stop servers — 


| StartApache — JI | 
Lo Sermsa JJ 
TH: UNIFORM SERVER (Semar — TE — Lo StartBoth ”— JI!) 


ai Utilities 


aan Documentation 


Gambar 1.18 Tampilan Uniform Server 
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Selain aplikasi tersebut di atas, masih banyak lagi aplikasi web server client 
yang tersedia dalam satu bundel, termasuk (Apache, PHP, dan MySOL), 
yaitu Xitami, AppServer, DAMP, Bitnami, dan lain-lain. 
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